<template>
    <section class="nav-install" style=" top: 0;" :style="{position: scrollTop ? 'fixed' : 'relative'}">
        <ul class="nav-install-list container">
            <li class="no-show none"><a href="/windows"><img src="../assets/ic_download_laptop.9e70c.svg" class="none" alt="device-icon">Windows
                版</a></li>
            <li><a href="/ios"><img src="../assets/ic_download_apple.16f50.svg" class="none" alt="device-icon">iOS 版</a></li>
            <li><a href="/android"><img src="../assets/ic_download_android.99269.svg" class="none" alt="device-icon">Android 版</a></li>
            <li class="no-show none"><a href="/mac"><img src="../assets/ic_download_laptop.9e70c.svg" class="none" alt="device-icon">macOS 版</a>
            </li>
            <li class="no-show none"><a href="/tv"><img src="../assets/ic_download_androidtv.67480.svg" class="none" alt="device-icon">Android
                TV版</a></li>
            <li><a href="/chrome"><img src="../assets/ic_download_chrome.243ae.svg" class="none" alt="device-icon">Chrome 插件版
                <!-- <span class="nav-install-rcm">推荐</span> --></a></li>
        </ul>
    </section>
</template>

<script>
export default {
    name: "NavInstall",
    data () {
        return {
            scrollTop: false
        }
    },
    methods: {
        scrollToTop() {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop > 50) {
                this.scrollTop = true
            } else {
                this.scrollTop = false
            }
        }
    },
    mounted() {
        window.addEventListener('scroll', this.scrollToTop) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
    }
}
</script>

<style scoped lang="scss">
@media (max-width: 767.98px) {
    .none {
        display: none!important;
    }
    .nav-install {
        .nav-install-list {
            flex-wrap: wrap;
            height: 60px!important;
            li {
                width: 33.3%!important;
                height: 60px!important;
                a {
                    font-size: 14px;
                    font-weight: 500;
                }
            }
        }
    }
}
    .nav-install {
        background: #fff;
        box-shadow: 0 4px 6px rgb(0 0 0 / 3%);
        width: 100%;
        z-index: 99;
        .nav-install-list {
            display: flex;
            height: 72px;
            align-items: center;
            justify-content: space-between;
            list-style: none;
            padding: 0;
            .no-show {
                border-left: 1px solid #e8e7f873;
            }
            li {
                position: relative;
                display: flex;
                width: 20%;
                height: 72px;
                justify-content: center;
                align-items: center;
                border-right: 1px solid #e8e7f873;
                a {
                    img {
                        width: 48px;
                    }
                }
            }
        }
    }
</style>
